<template>
    <div class="main">
        <!--        固定定位logo和tab切换-->
        <top active="0" black1="123"></top>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <one></one>
                </div>
                <div class="swiper-slide">
                    <div class="bg-img-box">
                        <img src="../../assets/indexImg/two_top_img.png" alt="" class="bg-img">
                    </div>
                    <two></two>
                </div>
                <div class="swiper-slide">
                    <three></three>
                </div>
                <div class="swiper-slide">
                    <four></four>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <ul class="mark">
                <li @click="toOne" :class="$store.state.isFlag==0?'light':''" @mouseover="showText(0)" @mouseout="unshowText()">
                   <transition name="moveShow">
                    <span v-show="indexh==0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首页—-</span>
                   </transition>
                </li>
                <li @click="toTwo" :class="$store.state.isFlag==1?'light':''" @mouseover="showText(1)" @mouseout="unshowText()">
                    <transition name="moveShow">
                    <span v-show="indexh==1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品—-</span>
                    </transition>
                </li>
                <li @click="toThree" :class="$store.state.isFlag==2?'light':''" @mouseover="showText(2)" @mouseout="unshowText()">
                    <transition name="moveShow">
                    <span v-show="indexh==2">新闻中心—-</span>
                    </transition>
                </li>
                <li @click="toFour" :class="$store.state.isFlag==3?'light':''" @mouseover="showText(3)" @mouseout="unshowText()">
                    <transition name="moveShow">
                    <span v-show="indexh==3">关于我们—-</span>
                    </transition>
                </li>
            </ul>

        </div>
        <!--            切换下一个-->
        <div class="next-box" @mouseover="changeIsshow" @mouseout="changeIsshow1">
            <img src="../../assets/indexImg/main_btm_btn1.png" alt="" v-if="$store.state.isFlag!=3" class="next-img1"
                 v-show="isShow">
            <img src="../../assets/indexImg/main_btm_btn2.png" alt="" v-if="$store.state.isFlag!=3"
                 class="swiper-button-next  next-img1" v-show="!isShow" style="opacity: 1">
        </div>

    </div>
</template>

<script>
    import top from "../../components/top";
    import one from "./components/one";
    import two from "./components/two";
    import three from "./components/three";
    import four from "./components/four";
    // import Swiper from "swiper"
    // import 'swiper/swiper-bundle.css'
    import 'swiper/swiper-bundle'
    import Swiper, {Pagination, Mousewheel, Navigation} from "swiper"

    Swiper.use([Pagination, Mousewheel, Navigation])
    import "swiper/swiper-bundle.css"
    //导入swiper相关样式
    export default {
        name: "index",
        components: {
            top,//头部 固定定位logo和tab切换
            one,//第一个轮播
            two,//第二个轮播
            three,//第三个轮播
            four,//第四个轮播
        },
        data() {
            return {
                isShow: true,//下一步图片的显示与隐藏
                mySwiper: "",//swiper实例化
                indexh: "231",//动画显示参数
            }
        },

        created() {
        },
        methods: {
            showText(index) {
                this.indexh = index
            },
            unshowText(){
                this.indexh = 999
            },
            changeIsshow() {
                this.isShow = false;
            },
            changeIsshow1() {
                this.isShow = true;
            },
            toOne() {
                this.mySwiper.slideTo(0, 1200, false)
            },
            toTwo() {
                this.mySwiper.slideTo(1, 1200, false)
            },
            toThree() {
                this.mySwiper.slideTo(2, 1200, false)
            },
            toFour() {
                this.mySwiper.slideTo(3, 1200, false)
            },
        },
        mounted() {
            let that = this
            this.mySwiper = new Swiper(".swiper-container", {
                direction: "vertical",
                slidesPerView: 1,
                spaceBetween: 30,
                mousewheel: true,
                speed:1200,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                on: {
                    slideChange: function () {
                        // alert('改变了，activeIndex为'+this.activeIndex);
                        that.$store.commit('modifyAnimate', this.activeIndex)
                    },
                },

            });
        }
    }
</script>

<style scoped lang="less">
    .moveShow-enter,
    .moveShow-leave {
        transform: translateX(-15px);
        opacity: 0;
    }
    .moveShow-enter-active,
    .moveShow-leave-active {
        transition: all 0.5s linear;
    }

    .light {
        background-color: #71c1ff !important;
    }
    .mark {
        position: fixed;
        right: 2%;
        top: 35%;
        z-index: 1003;
        width: 10px;
        height: 220px;

        li {
            background: #fff;
            opacity: 1;
            cursor: pointer;
            border-radius: 50%;
            margin-bottom: 45px !important;
            width: 10px;
            height: 10px;
            position: relative;
            -webkit-box-shadow: 0 0 10px #ccc;
            span {
                display: inline-block;
                width: 100px;
                position: absolute;
                left: -95px;
                top: -6px;
                color: #71c1ff;
                text-align: center;
            }
        }
    }

    /deep/ .swiper-button-next {
        position: absolute;
        left: calc(50% - 77px);
        top: auto;
        bottom: 0 !important;
        margin-top: 0;
    }

    /deep/ .next-img1 {
        width: 154px;
        height: 50px;
        position: absolute;
        z-index: 12;
        left: calc(50% - 77px);
        bottom: 0 !important;
        cursor: pointer;
        /*opacity: 0;*/
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        position: fixed;
    }

    .bg-img-box {
        height: 380px;
        width: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, .4);
    }

    .bg-img {
        width: 100%;
        height: 100%;
        opacity: .3;
    }

    .main {
        background-image: url("../../assets/indexImg/index_bg.jpg");
        position: fixed;
        width: 100%;
        height: 100%;
    }

    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    /*/deep/ .swiper-pagination {*/
    /*    position: fixed;*/
    /*    right: 2%;*/
    /*    !*top: 35%;*!*/
    /*    z-index: 1003;*/
    /*    width: 10px;*/
    /*    height: 220px;*/
    /*}*/

    /*/deep/ .swiper-pagination-bullet {*/
    /*    background: #fff !important;*/
    /*    opacity: 1;*/
    /*    cursor: pointer;*/
    /*    border-radius: 50%;*/
    /*    margin-bottom: 45px !important;*/
    /*    width: 10px;*/
    /*    height: 10px;*/
    /*    position: relative;*/
    /*    -webkit-box-shadow: 0 0 10px #ccc;*/
    /*}*/

    /*/deep/ .swiper-pagination-bullet-active {*/
    /*    background-color: #71c1ff !important;*/
    /*}*/

    .swiper-slide {
        height: 100%;
    }

</style>